<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(link)"/>
<body>
<div id="app" class="ok-body" v-cloak>
    <!--模糊搜索区域-->
    <template>
        <div style="margin-bottom: 8px;margin-top: 8px;">
            <i-input placeholder="输入内容"  v-model="entity.description"  style="width: 300px"></i-input>
            <i-button type="primary"  icon="ios-search" @click="load()">搜索</i-button>
            <i-button type="primary"  icon="ios-redo" @click="reload()" >重置</i-button>
            <i-button type="primary" style="float:right;" icon="md-add" @click="add()">新增</i-button>
        </div>
    </template>
    <template>
        <i-table size="small" :columns="tableTitle"  :data="tableData">
            <template slot-scope="tableScope" slot="action">
                <i-button type="primary" size="small" icon="md-create" ghost class="table-btn" @click="edit(tableScope.row)">修改</i-button>
                <i-button type="primary" size="small" icon="md-trash" ghost class="table-btn" @click="remove(tableScope.row)">删除</i-button>
            </template>
        </i-table>
        <br>
        <Page  style="float: right;" :current="entity.pageNo" :total="tableSize" :page-size="entity.pageSize"  @on-change="changePage" @on-page-size-change="changePageSize" show-elevator show-sizer show-total></Page>
    </template>
</div>
<div th:replace="common/foot :: foot(script)"></div>
<script th:inline="none">
layui.use(["okUtils", "okLayer"], function () {
    var okUtils = layui.okUtils;
    var okLayer = layui.okLayer;
    var vm = new Vue({
        el: '#app',
        data: function(){
        var that = this;
		return {
           tableTitle : [{
					title: "序号",
					width : 70,
					render: function(h, params) {
						return h('span', params.index + (that.entity.pageNo- 1) * that.entity.pageSize + 1);
					}
				},
	            {key: "type", title : "类型",align: 'center' ,width:150 },
	            {key: "description", title : "描述信息",minWidth:200 },
	            {key: "params", title : "参数",width:200 },
	            {key: "gmtCreate", title : "创建时间",align: 'center' ,width:200 },
	            {key: "status", title : "是否可用",width:100,
	            render: function(h, params) {
	            	var name = params.row.status==1?"正常":"禁用"
					return h('span',name);
				}},
	            {key : 'action',title : '操作', align : 'left',width : 200,fixed:'right',slot:'action'}
	        ],
            tableData : [],
            entity  : {
                pageSize : 10,
                pageNo : 1,
                description:''
            },
            tableSize : 50,
          }
        },
        methods: {
            load : function() {
                var that = this;
                okUtils.ajaxCloud({
                    url:"/sys/interface/list",
                    param : that.entity,
                    success : function(result) {
                         that.tableData = result.msg.pageData;
                         that.tableSize = result.msg.totalCount;
                    }
                });
            },
            reload : function(){
                vm.entity.pageSize = 10;
                vm.entity.pageNo = 1;
                vm.entity.description = '';
                this.load();
            },
            changePage : function(pageNo) {
                vm.entity.pageNo = pageNo;
                vm.load();
            },
            changePageSize : function(pageSize) {
                vm.entity.pageSize = pageSize;
                vm.load();
            },
            edit : function(entity) {
                okUtils.dialogOpen({
                    title: '修改',
                    url: "sys/interface/form.html",
                    scroll : true,
                    width: '60%',
                    height: '75%',
                    success : function(dialog) {
                        dialog.vm.entity = JSON.parse(JSON.stringify(entity));
                    },
                    yes : function(dialog) {
                        dialog.vm.acceptClick(vm);
                    }
                });
            },
            add:function(){
                 okUtils.dialogOpen({
                    title: '新增',
                    url: "sys/interface/form.html",
                    scroll : true,
                    width: '60%',
                    height: '75%',
                    yes : function(dialog) {
                        dialog.vm.acceptClick(vm);
                    }
                });
            },
            remove:function(config) {
                 okLayer.confirm("确定要删除吗？", function () {
                    okUtils.ajaxCloud({
                        url:"/sys/interface/delete",
                        param : {id: entity.id},
                        success : function(result) {
                            okLayer.msg.greenTick(result.msg)
                            vm.load();
                        }
                    });
                 })
            }
        },
        created: function() {
            this.load()
        }
    })
  });
</script>
</body>
</html>
